{% extends 'base.html' %}
{% block title %}注册{% endblock %}
{% block head %}
	<link rel="stylesheet"  href="{{ url_for('static',filename='css/register.css')}}"/>
{% endblock %}
{% block main %}

<div class="register">
	
	<form id="registerForm">
		<!-- <div class="form-container "> -->
			
			<table  align="center" class="register_tab" style="border-collapse:separate; border-spacing:0px 10px;">
			  <h3 class='page-title'>注册</h3>
			  <tr >
					<td align="right" valign="middle"><font color="red">*</font>用户名：</td>
				    <td colspan="2">
							<input type="text" id ="usernameInput" placeholder="请设置用户名" name="username"  size="30" onchange="checkLoginName()"/>
							
					</td>
					<td align="left" valign="middle"><span id="usernameInputTip">请输入6-10位字母+数字组合</span></td>
				</tr>
				<tr>
					<td align="right" valign="middle"><font color="red">*</font>手机号：</td>
					<td colspan="2" align="left" valign="middle">
							<input type="text" id ="telephoneInput" placeholder="请输入注册手机号" name="telephone" size="30" onchange="checkPhoneNum()">
					</td>
					<td align="left" valign="middle"><span id="telephoneInputTip"></span></td>
		        </tr>
				<tr>
					<td align="right" valign="middle"><font color="red">*</font>密码：</td>
					<td colspan="2" align="left" valign="middle">
					
							<input type="password" id ="pwd1Input"  placeholder="请设置密码" name="password1" size="30" onchange="checkPwd1()">
					</td>
					<td align="left" valign="middle"><span id="pwd1InputInputTip"></span></td>
				</tr>
				<tr>
					<td align="right" valign="middle"><font color="red">*</font>确认密码：</td>
					<td colspan="2" align="left" valign="middle">
					
								<input type="password" id ="pwd2Input"  placeholder="请确认密码" name="password2" size="30" onchange="checkPwd2()">
					</td>
					<td align="left" valign="middle"><span id="pwd2InputTip"></span></td>
				</tr>
				<tr>
					<td align="right" valign="middle"> </td>
					<td align="left" valign="middle"> 
					<label style="font-size:13px;cursor: pointer;"><input type="checkbox" name="checkbox" id="checkbox" onclick="enableButton();" />同意</label> <a href="#" target="_blank" class="fwxy">时间银行服务协议</a>
					<span class="yzc_dl rf">已有账号？<a href="/timebank/welcome/frontLogin.action" target="_blank" class="dl_an">去登录</a></span></td>
				  </tr>
				  <tr>
					<!--<td align="right" valign="middle"> </td>-->
					<td colspan="4" align="right" ><input disabled="disabled" id="registerButton" type="button" class="btn btn-primary btn-block dl_but_disable" onclick="btn_register();" value="提交注册"/></td>
				</tr>
				
				
			</table>
		<!-- </div> -->
	</form>
	<script>
		//检查登录名
		function checkLoginName(){
			var username = $.trim($('#usernameInput').val());
			$('#usernameInput').val(username);
			if(username == ''){
				$('#usernameInputTip').text('请输入登录名4-16位字母+数字组合');
				$('#usernameInput').focus();
				return false;
			}
			if(!(/([a-zA-Z0-9]+){4,16}$/.test(username))){
				$('#usernameInputTip').text("登录名请取4-16位字母+数字组合");
				$('#usernameInput').focus();
				return false;
			}
			if(!isNaN(username)){
				$('#usernameInputTip').text("登录名请取4-16位字母+数字组合");
				$('#usernameInput').focus();
				return false;
			}
			$('#usernameInputTip').text("登录名可用");
			return true;
		}
		//检查手机号
		function checkPhoneNum(){
			var phoneNum = $.trim($('#telephoneInput').val());
			$('#telephoneInput').val(phoneNum);
			if(phoneNum==""){
			$('#telephoneInputTip').text("请输入手机号");
			$('#telephoneInput').focus();
			return false;
			} else {
				var rs1=/^0\d{2,3}-\d{5,9}$/;
				var rs2=/^1[34578]\d{9}$/;
				if(rs1.test(phoneNum) || rs2.test(phoneNum)){
					var flag = false
					$.ajax({
							type:"get",
							async:false,
							dataType: "json",//从服务端返回的数据类型
							url:"/register/checkTel?tel="+phoneNum,
							success:function(data){
								if(data.status==501){
									$('#telephoneInputTip').text("该手机号可以使用");
									flag =true;

								}else{
									$('#telephoneInputTip').text("该手机号已经被注册过了");
									$('#telephoneInput').focus();
									flag =false;

								}
							},
							error:function(data){
								$('#telephoneInputTip').text("网络异常");
								$('#telephoneInput').focus();
								flag =false;
							}

						});
					
					return flag;
					
				}else{
					$('#telephoneInputTip').text("输入的手机号无效");
					$('#telephoneInput').focus();
					return false;
				}
			}
			
				
			}


		
		//禁启用注册按钮
		function enableButton(){
			if($("#checkbox").prop("checked")){
				$("#registerButton").attr("disabled",false);
				// $("#registerButton").removeClass("dl_but_disable").addClass("dl_but");
			}else{
				$("#registerButton").attr("disabled",true);
				// $("#registerButton").removeClass("dl_but").addClass("dl_but_disable");
			}
		} 
		//检查登录密码
		function checkPwd1(){
			var password1 = $.trim($('#pwd1Input').val());
			$('#pwd1Input').val(password1);
			if(password1 == ""){
				$('#pwd1InputInputTip').text("请输入登录密码");
				$('#pwd1Input').focus();
				return false;
			}else if(password1.length < 6){
				$('#pwd1InputInputTip').text("登录密码太短，至少6位数");
				$('#pwd1Input').focus();
				return false;
			}
			$('#pwd1InputInputTip').text('密码可以使用');
			return true;
		}
		//检查确认密码
		function checkPwd2(){
			var password1 = $.trim($('#pwd1Input').val()); 
			var password2 = $.trim($('#pwd2Input').val());
			$('#pwd2Input').val(password2);
			// alert(password1+password2)
			if(password2 == ""){
				$('#pwd2InputTip').text("请输入确认密码");
				$('#pwd2Input').focus();
				return false;
			}else if(password2 != password1){
				$('#pwd2InputTip').text("两次输入的密码不一致");
				$('#pwd2Input').val("");
				$('#pwd2Input').focus();
				return false;
			}
			$('#pwd2InputTip').text('两次密码输入一致')
			return true;
		}

		//提交注册请求
		function btn_register(){
			
			//检查登录名
			if(!checkLoginName()){
				
				return;
			}
			//检查登录密码
			if(!checkPwd1()){
				return;
			}
			//检查登录密码确认
			if(!checkPwd2()){
				return;
			}
			//检查手机号
			if(!checkPhoneNum()){
				
				return;
			}
			$.ajax({
			//几个参数需要注意一下
				type: "POST",//方法类型
				dataType: "json",//从服务端返回的数据类型
				url: "/register" ,//url
				data: $('#registerForm').serialize(),
				success: function (result) {
					//alert(result.message);//打印服务端返回的数据(调试用)
					if(result.status== 501){
						window.location.href="/register/success";
					}
				}
				// alert(data.message);
				// if(data.message.indexOf("注册成功")>=0){
				// 	jQuery.getJSON("/shopping/admin/sync_user_info.htm?userIds="+data.userId);
				// 	//设置参数并跳转
				// 	window.location.href="/timebank/welcome/front/mybank.action";
				// }

				});
			
		}

		</script>
</div>
{% endblock %}